<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet"  type="text/css" href="css/demo3.css"/>
		<link rel="stylesheet" type="text/css" href="css/111.css"/>
		<link rel="stylesheet" type="text/css" href="css/222.css"/>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
	</head>
	<body>
		<div class="head">
			<div class="main">
				<div class="topnar-left">
					Hi，欢迎来到洋码头！
					<span><a href="">我是买手</a></span>
				</div>
				<div class="topnar-right">
					<ul>
						<li><a href="2.html">登陆</a></li>
						<li><a href="">注册</a></li>
						<li><a href="">购物车</a></li>
						<li><a href="">我的订单</a></li>
						<li><a href="">个人中心</a></li>
						<li><a href="">规则&公告</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="main nav-a1">
			<div class="logo-a1">
				<img src="img/logo3.png" />
			</div>
			<div class="logo-a2" ">购物车</div>
			<ul class="logo-a3">
	            <li class="active"><em>1</em>我的购物车</li>
	            <li style="background: #f1f1f1;"><em>2</em>提交订单</li>
	            <li style="background: #f1f1f1;"><em>3</em>选择支付方式</li>
        	</ul>
		</div>
		
		<div class="total-bar main">
			<span style="height: 30px; width: 158px; display: block; border-bottom: 2px solid #c33;">全部商品  <em class="total">4</em></span>
		</div>
		
		<p class="tips main">海外买手会根据现行国家政策要求，通过不同的物流方式分别发货，其实对你没有影响啦~</p>
		
		<div class="table-title main" >
            <span class="check-all hookCheckAll"><input type="checkbox"   value="true"><i style="padding-left: 6px;">全选</i></span>
            <span class="product-info">商品信息</span>
            <span class="price">单价(元)</span>
            <span class="count">数量</span>
            <span class="sum">金额(元)</span>
            <span class="operate">操作</span>
        </div>
  		<div id="gwxx" class="product-bd main" >
  			<div style="float: left;">
  			<span class="product-a1"><input type="checkbox"   value="true"></span>
  			<div   class="product-a2">
	  			<dl>
	  				<dd><img style="width: 80px; height: 80px; float: left;" src="img/tu1.jpg"/></dd>
	  				<dt>
	  					<p class="pi-name">
                            <em class="pi-type"> 包邮包税 </em>
                                                        日本Dr.Scholl 系列 爽健QTTO瘦身塑形 薰衣草色睡眠袜
                        </p>
	  				</dt>
	  			</dl>
	  			<div class="pi-attribute" >
                                                    规格:M-L    
                    <div class="modify-wrap" style="display: none;">
                        <span class="modify">修改</span>
                    </div>
               </div>           
  			</div>
  			</div>
            <p class="current-price">188.00</p> 
            <div class="count">           
                <ul>
                	<li>-</li>
                	<li class="count-a1">1</li>
                	<li>+</li>
                </ul></div><div style="float: left; margin-top: 10px; margin-left: 20px;">188</div><em class="delete">删除</em>
           
  		</div>
  		<div class="account-wrap" style="position: fixed; bottom: 0px; left: 0px; right: 0px; background: rgb(255, 255, 255); z-index: 10;">
            <div class="aw-l">
                <span class="check-all"><label><input type="checkbox"   value="true"></i>全选</label></span>
                <span class="del-checked hookToDeleteSelected">删除选中商品</span>
            </div>
            <div class="aw-r">
                <span class="aw-info">已选 <em class="num hookSelectedProdNum">0</em> 件商品，总价<span id="DiscountAmount"></span>：<em class="unit">¥</em><em class="total hookCartTotalPrice">0.00</em></span>
                <button class="account-btn disabled" id="toSettleAccountsBtn">结算</button>
            </div>
        </div>
        
        <div style="height: 100%; display: block; float: right;">
	    		<ul style="padding:260px 0 0; position:fixed; right: 0; top: 0; width: 35px; height: 100%; background: #383838; text-align: center;">
			        <li><a href=""  title="我" style="width: 35px; height: 50px;display: block; border-bottom: 1px solid #fff; line-height: 50px;">
			        	<i class="iconfont" style="font-size: 20px; color: #fff;;" >&#xe64b;</i></a></li>
			        <li style="text-align: center;padding-bottom: 2px; width: 35px; height: 80px; border-bottom: 1px solid #fff; margin-top: 10px;  font-size: 12px;">
			            <a href=""  target="_blank" title="购物车">
			            <i class="iconfont" style="color: #fff;">&#xe603;</i><br />
			             <span class="title" style="color: #fff; ">购<br>物<br>车</span>		                
			            </a>
			        </li>
			        <li>
		            <a style="padding-bottom: 2px; width: 35px; height: 58px; border-bottom: 1px solid #fff;line-height: 58px; display: block;" title="二维码" >
		            	<i class="iconfont" style="color: #fff; font-size: 26px;">&#xe7c1;</i></a>	          
			        </li>	
			        <li>
			        	<i class="iconfont" style="color: #fff; font-size: 20px;">&#xe60b</i><br />
			        	<a href="" style="color: #fff;">TOP</a>
			        </li>
			    </ul>
			</div>                            
			<!--<div class="wrapper footer " style="margin-top: 30px;" module_name="user_guarantee">
			    <div class="matou-server" style="padding:10px 0;height:60px; background: #c33;">
			        <a class="matou-server-link" style="color:#fff;" href="//www.ymatou.com/help/zhengpin.html" target="_blank">
			            <img src="img/baozheng.png">
			        </a>
			    </div>
		    <div class="area" >
		        <div id="bottom_list" class="bottom_list">
		            <ul class="dl">
		                <li class="dt">购物指南</li>
		                <li><a href="//help.ymatou.com/help_01.html" target="_blank" rel="nofollow">注册与登录</a></li>
		                <li><a href="//help.ymatou.com/help_02.html" target="_blank" rel="nofollow">账户信息维护</a></li>
		                <li><a href="//help.ymatou.com/help_05.html" target="_blank" rel="nofollow">购物流程</a></li>
		                <li><a href="//help.ymatou.com/help_09.html" target="_blank" rel="nofollow">会员体系</a></li>
		                <li><a href="//help.ymatou.com/help_01_1.html" target="_blank" rel="nofollow">常见问题</a></li>
		            </ul>
		            <ul class="dl">
		                <li class="dt">订单服务</li>
		                <li><a href="//help.ymatou.com/help_07.html" target="_blank" rel="nofollow">订单状态说明</a></li>
		                <li><a href="//help.ymatou.com/help_01_1.html" target="_blank" rel="nofollow">自动取消订单</a></li>
		                <li><a href="//help.ymatou.com/help_07.html" target="_blank" rel="nofollow">上传身份证</a></li>
		            </ul>
		            <ul class="dl">
		                <li class="dt">支付与配送</li>
		                <li><a href="//help.ymatou.com/help_06.html" target="_blank" rel="nofollow">支付方式</a></li>
		                <li><a href="//help.ymatou.com/help_16.html" target="_blank" rel="nofollow">优惠券和红包</a></li>
		                <li><a href="//help.ymatou.com/help_06.html" target="_blank" rel="nofollow">如何提现</a></li>
		                <li><a href="//help.ymatou.com/help_07.html" target="_blank" rel="nofollow">配送方式</a></li>
		            </ul>
		            <ul class="dl">
		                <li class="dt">售后服务</li>
		                <li><a href="//help.ymatou.com/help_15.html" target="_blank">消费维权</a></li>
		                <li><a href="//help.ymatou.com/help_16.html" target="_blank">纠纷处理规则</a></li>
		                <li><a href="//help.ymatou.com/help_17.html" target="_blank">退货规则</a></li>
		            </ul>
		            <div class="dl last">
		                <div class="dt">官方微信</div>
			                <p>
			                    <img src="//static.ymatou.com/content/images/weixin2d-new.png" class="img">
			                </p>
			                <span class="weibobox">
			                   
			                    <a href="http://weibo.com/ymatou2011" target="_blank"><span class="ico-weibo-png"></span></a>
			                </span>
		            </div>
		        </div>
			    <div class="matou-intro">
			        <a href="//about.ymatou.com/" target="_blank" rel="nofollow">关于码头</a>
			        <a href="//about.ymatou.com/zhaopin.html" target="_blank" rel="nofollow">码头招聘</a>
			        <a href="//www.ymatou.com/sellerhome/sitemap/index" target="_blank">网站地图</a>
			        <a href="//help.ymatou.com/index.html" target="_blank" rel="nofollow">所有帮助</a>
			        <a href="//staticontent.ymatou.com/html/merchant/index.html" target="_blank" rel="nofollow">海外招商中心</a>
			        <a href="//staticontent.ymatou.com/html/ms_rule/" target="_blank" rel="nofollow">扫货买手规则</a>
			        <a class="last" href="//help.ymatou.com/qa_02.html" target="_blank" rel="nofollow">卖家常见问题</a>
			    </div>
				<ul class="matou-link">
				    <a href="http://www.55bbs.com/" target="_blank">55bbs我爱购物网</a>
				    <a href="http://www.liba.com/" target="_blank">篱笆网</a>
				    <a href="http://www.kimiss.com/" target="_blank">闺蜜网</a>
				    <a href="http://www.mplife.com/" target="_blank">名品导购网</a>
				    <a href="http://www.rayli.com.cn/" target="_blank">瑞丽女性网</a>
				    <a href="http://www.qidian.com/" target="_blank">起点中文网</a>
				    <a href="http://www.qdmm.com/" target="_blank">起点女生网</a>
				    <a href="http://www.ku6.com/" target="_blank">酷6网</a>
				    <a href="http://fanli.tpy100.com/" target="_blank">太平洋返利网</a>
					<a href="/forum-discount" target="_blank">海外折扣拼团</a>
					<a href="http://www.handuyishe.com" target="_blank">韩都衣舍</a>
					<a href="http://www.jianianle.com" target="_blank">嘉年乐</a>
					<a href="http://www.homevv.com" target="_blank">为为网购商城</a>
					<a href="http://www.tcsw.cn/" target="_blank">同城购物网</a>
					<a href="http://www.jia.com/" target="_blank">齐家网</a>
					<a href="http://www.easy361.com/" target="_blank">网上商城</a>
					<a href="http://www.lipin-bj.cn/" target="_blank">礼品公司</a>
					<a href="http://www.rayedu.com.cn/" target="_blank">留学服务中心</a>
					<a href="https://giftpi.com" target="_blank">礼派</a>
					<a href="http://www.kyp.com" target="_blank">快易拍</a>
					<a href="http://www.binlun.com.cn" target="_blank">手表</a>
					<a href="http://www.kadang.com/" target="_blank">卡当创意礼物</a>
					<a href="http://www.wsqsgo.com/" target="_blank">户外装备</a>
					<a href="http://woyaozhan.com/" target="_blank">母婴展</a>
					<a href="http://www.weicaifu.com/" target="_blank">微财富理财</a>
					<a href="//help.ymatou.com/links_01.html" target="_blank" class="bo">更多&gt;&gt;</a>        
				</ul>
        			<div class="friendLinks">
			            <a id="___szfw_logo___" href="https://credit.szfw.org/CX20150828011121560680.html" target="_blank" class="linkitem icon-kexin" rel="nofollow"></a>
			            <a class="linkitem icon-chengxin" target="_blank" rel="nofollow" href="http://www.ectrustprc.org.cn/certificate.id/certificateb.php?id=20042484"></a>
			            <span class="linkitem icon-zhifubao" title="支付宝特约商户"></span>
			            <a class="linkitem icon-wangjing" href="http://www.zx110.org/" target="_blank" rel="nofollow"></a>
			        	<a class="linkitem icon-gongshang3" href="http://scjgj.sh.gov.cn/platform/survey/step1_phone" target="_blank" rel="nofollow"></a>
        			</div>
			        <div id="copywrite" class="copywrite copyright">
			            © 2009－2019 ymatou.com, All rights reserved 增值电信业务经营许可证：沪B2-20140021
			            <br><a href="http://www.beian.miit.gov.cn" target="_blank">上海洋码头网络技术有限公司  版权所有 备案号（ 沪ICP备11050082号 ）</a>
			            <br>上海市静安区江场三路93号13层
			        </div>
			    <div class="friendLinks2">
			        <div class="friendLinks" style="float: left;width: 66px;"><a class="linkitem icon-gongshang" target="_blank" href="http://www.sgs.gov.cn/lz/licenseLink.do?method=licenceView&amp;entyId=20111031111726664" target="_blank" rel="nofollow"></a></div>
			        <a class="beian-banner"target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010802001410"><i class="beian"></i>沪公网安备 31010802001410号</a>
			        <span class="split">|</span>
			        <span class="link-item">违法不良信息举报电话：021-80185223</span>
			        <span class="split">|</span>
			        <a class="link-item" href="http://www.shjbzx.cn/" target="_blank">
			            <span class="jbzxIcon"></span>
			            <span>上海市互联网上海市互联网举报中心</span>
			        </a>
			    </div>
    		</div>
		</div>-->
                                    

	</body>
</html>
<script>
		window.onload = function(){
			var a;
			var b;
			
			var gwxx=document.getElementById("gwxx");
//			gwxx.style.display="none";
			util = {
				//设置本地存储
				setStorage:function(json){
					window.localStorage.setItem('cart',JSON.stringify(json));
				},
				//获取本地存储
				getStorage:function(){
					return JSON.parse(window.localStorage.getItem('cart')||'[]');
				}
			}
			
			//定义一个商品的构造函数,可以创建一个商品对象:{	id:"",name:"",pic:"",num:"",price:""}
			function Product(id,name,pic,price){				
				this.id = id;
				this.name = name;
				this.pic = pic;
				this.num = 1;
				this.price = price;
			}

			//1 生成一个购物车,可以展示购物车内的内容
			function renderCart(selector){
				//获取购物车所在的容器
				var box = document.querySelector(selector);
				//box的innerHTML进行模板拼接
				var boxStr = '';
//				`<table>
//					<tr>
//				<th>商品ID</th>
//				<th>图片</th>
//				<th>商品名称</th>				
//				<th>商品数量</th>
//				<th>商品价格</th>
//				<th>操作</th>
//					</tr>`;
				//根据商品种类生成多行,实时获取本地存储中的购物车列表
				var productList = util.getStorage();
				for(var i = 0; i < productList.length; i++) {
					boxStr += `
					<div id="gwxx" class="product-bd main">
					<div style="float: left;">
  			<span class="product-a1"><input type="checkbox"   value="true"></span>
  			<div class="product-a2">
	  			<dl>
	  				<dd><img style="width: 80px; height: 80px; float: left;" src="${productList[i].pic}"/></dd>
	  				<dt>
	  					<p class="pi-name">
                            <em class="pi-type"> 包邮包税 </em>
                                                        ${productList[i].name}
                        </p>
	  				</dt>
	  			</dl>
	  			<div class="pi-attribute" >
                                                    规格:M-L    
                    <div class="modify-wrap" style="display: none;">
                        <span class="modify">修改</span>
                    </div>
               </div>           
  			</div>
  			</div>
            <p class="current-price">${productList[i].price}</p> 
            <div class="count">
         	<i class="alli" style="display:none" >${productList[i].id}</i>
                <ul>
                	<li class="cut">-</li>
                	<li class="count-a1">${productList[i].num}</li>
                	<li class="add">+</li>
                </ul>                
            </div>
            <div id="zjg" style="float: left; margin-top: 10px; margin-left: 20px;">${productList[i].price}*${productList[i].num}</div>
            <p><i class="alli" style="display:none">${productList[i].id}</i> <em class="delete ">删除</em> </p>
             <p class="find-similar hookFindSimilar" id="741cf0ef-d43a-4a50-8f3c-a4d6f1a5bb53"><i class="blackfive-icon bi-find-similar"></i></p> 
  		</div>
  		<div class="account-wrap" style="position: fixed; bottom: 0px; left: 0px; right: 0px; background: rgb(255, 255, 255); z-index: 10;">
            <div class="aw-l">
                <span class="check-all"><label><input type="checkbox"   value="true"></i>全选</label></span>
                <span class="del-checked hookToDeleteSelected ">删除选中商品</span>
            </div>
            <div class="aw-r">
                <span class="aw-info">已选 <em class="num hookSelectedProdNum">0</em> 件商品，总价<span id="DiscountAmount"></span>：<em class="unit">¥</em><em class="total hookCartTotalPrice">0.00</em></span>
                <button class="account-btn disabled" id="toSettleAccountsBtn">结算</button>
            </div>
        </div>`
				}
				


				gwxx.innerHTML = boxStr;//购物车列表渲染到页面上,给其中的删除按钮添加事件
				addDelEvent(gwxx);
				//购物车列表渲染到页面上,给其中的+,-按钮添加事件
				addChangeNumEvent();
				
			};
			renderCart('div');
			//2 增加商品:点击加入购物车,商品可以在购车列表显示,如果该商品已经加入过购物车,则添加数量,第一次加入则增加一行显示
			addCartEvent();
			function addCartEvent(){			
				//选中所有加入购物车按钮
				var addCartBtnS = document.querySelectorAll('.addCart');	
				//给每个按钮添加事件,forEach是数组的方法
				for(var i=0;i<addCartBtnS.length;i++){
					addCartBtnS[i].addEventListener('click',function(){
						var li = this.parentNode;//获取删除按钮所在的li
						var id = li.children[0].innerHTML;//获取商品id
						var pic = li.children[1].src;//获取商品的pic
						var name = li.children[2].innerHTML;//获取商品的名称
						var price = li.children[3].innerHTML;//获取商品的名称
						//加入购物车列表数据,并展示在页面上
						addProduct(id,name,pic,price);
					})
				}
			}
			//可以根据传入的商品详情,把该商品加入购物车列表并展示出来
			function addProduct(id,name,pic,price){
				var productList = util.getStorage();
				//如果该商品已经加入过购物车,则添加数量
						for(var j=0;j<productList.length;j++){
							if(productList[j].id==id){
								productList[j].num+=1;
								//改变购物车列表以后要存入本地存储
								util.setStorage(productList);
								// console.log(productList);
								renderCart('div');
								return;
							}
						}
						//第一次加入则增加一行显示
						var product = new Product(id,name,pic,price);
						productList.push(product);
						//改变购物车列表以后要存入本地存储
						util.setStorage(productList);
						renderCart('div');
						// console.log(productList);
			}

			//3 点击删除按钮(类名:del)可以删除该行商品
			function addDelEvent(selector){
				//获取所有删除按钮
//				var box = document.getElementById(selector);
//				
				var delBtnArr = document.getElementsByTagName('em');
				//循环绑定事件
//				console.log(delBtnArr1);
//				var arrD=[];
//				for(var j=0;j<delBtnArr1.lenght;j++){
//					if(delBtnArr1[i].className=="delete"){
//						arrD.push(delBtnArr1[i]);
//					}
//				}
//				console.log(arrD);
//				
				for(var i=0;i<delBtnArr.length;i++){
					delBtnArr[i].onclick = function(){
						var tr = this.parentNode;
						console.log(tr);
						var id = tr.children[0].innerHTML;
						console.log(id);
						
						removeProduct(id);
					}
				}

			}
			function removeProduct(id){
				var productList = util.getStorage();
				productList = productList.filter(function(product){
					return product.id!==id;
				});
				//删除完成后同步本地存储
				util.setStorage(productList);
				//重新刷新页面
				renderCart('div');
			}
			//4 可以修改(增加和减少)购物车中的商品数量,当商品数量为0的时候,删除该商品
			
			//给add和cut元素添加事件
			function addChangeNumEvent(){
//				var box = document.querySelector(selector);//购物车容器
				var  addArr=document.getElementsByClassName("add");
				var  cutArr=document.getElementsByClassName("cut");
//				console.log(addArr);
//				var addArr = box.querySelectorAll('.add');//添加按钮集合
//				var cutArr = box.querySelectorAll('.cut');//减少按钮集合
				for(var i=0;i<addArr.length;i++){
					addArr[i].onclick = cutArr[i].onclick=function(){
						var tr1 = this.parentNode.parentNode;
//						var tr = tr1.nextSibling;
						
						var id = tr1.children[0].innerHTML;
						console.log(id);
//						var id = tr.children[0].innerHTML;
						//调用改变商品数量
						changeNum(this.className,id);
					}
					
				}
			}
			//具体执行add和cut
			function changeNum(type,id){
				//策略模式
				var callbackObj = {
					'add':function(id){
						//获取本地数据
						var productList = util.getStorage();
						for(var i=0;i<productList.length;i++){
							if(productList[i].id==id){
								//如果循环到商品的id等于传入的id,该商品数量增加
								productList[i].num+=1;
								util.setStorage(productList);
								renderCart('div');
								return;

							}
						}
					},
					'cut':function(id){
						//获取本地数据
						var productList = util.getStorage();
						for(var i=0;i<productList.length;i++){
							if(productList[i].id==id){
								//如果循环到商品的id等于传入的id,该商品数量增加
								productList[i].num-=1;
								if (productList[i].num<1) {
									removeProduct(id);
									return;
								}
								util.setStorage(productList);
								renderCart('div');
								return;

							}
						}
					}
				};
				callbackObj[type](id);

			}

		}
		
	</script>